import { Table, message, Popconfirm, Space, Modal, Row, Col } from "antd";
import { useModel, Outlet, useLocation, history } from "umi";
import { Card as SemiCard, ButtonGroup, Button, List } from "@douyinfe/semi-ui";
import { IconRefresh, IconPlusCircle, IconDelete } from "@douyinfe/semi-icons";
import { useReactive } from "ahooks";
import { useEffect } from "react";

import useServicer from "../hooks/useServicer";

import AddServicerModal from "../_modals/resource/add.servicer";

const ServicersPage = () => {
    const { windowInnerHeight } = useModel("global");
    const { setModalVisible, setModalTitle, setModalWidth, setModalComponent } = useModel("global.modal");
    const { routers } = useModel("routers");
    const { dataLoading, loadServicers, servicers, selectedServicer, setSelectedServicer, updateSelectedServicerRoles } = useServicer();
    const { submitLoading, deleteServicer, updateIsAuth, updateStatus } = useServicer();
    const { pathname, state } = useLocation();

    const currentPath = pathname.substr(1).split("/")[1];

    useEffect(() => {
        loadServicers(state?.spUuid || null);
    }, []);

    const deleteItem = async (item) => {
        Modal.confirm({
            title: "确认",
            content: `确认要移除该【${item.oiName}】应用服务商吗?`,
            okButtonProps: { loading: submitLoading },
            onOk: async () => {
                deleteServicer(item.oiUuid, () => {
                    message.success("成功移除应用服务商信息");
                    loadServicers();
                });
            },
        });
    };

    const openAddServicer = async () => {
        setModalTitle("添加服务组织");
        setModalWidth(600);
        setModalComponent(<AddServicerModal reloadData={loadServicers} />);
        setModalVisible(true);
    };

    let buttonMenus = [];
    for (const key in routers["servicer"].subMenus) {
        const item = routers["servicer"].subMenus[key];
        buttonMenus.push({ label: item.title, value: key });
    }

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <Row gutter={10} style={{ padding: 10 }}>
            <Col span={5}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 15 }}>应用服务商列表</span>}
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    size="default"
                    bodyStyle={{ padding: 1, height: cardBodyHeight, overflow: "auto" }}
                    headerExtraContent={
                        <ButtonGroup>
                            <Button icon={<IconPlusCircle />} onClick={openAddServicer}></Button>
                            <Button icon={<IconRefresh />} onClick={loadServicers}></Button>
                        </ButtonGroup>
                    }
                >
                    <List
                        loading={dataLoading}
                        dataSource={servicers}
                        renderItem={(item, index) => {
                            return (
                                <List.Item
                                    key={index}
                                    className={`list-item ${selectedServicer?.oiUuid === item?.oiUuid ? "list-item-selected" : ""}`}
                                    main={
                                        <div>
                                            <div>{item.oiName}</div>
                                            <div style={{ fontSize: 12 }}>{item?.oiUscc}</div>
                                        </div>
                                    }
                                    extra={
                                        <Space className="bnts" size={0}>
                                            <Button theme="borderless" icon={<IconDelete style={{ color: "#E91E63" }} />} onClick={() => deleteItem(item)} />
                                        </Space>
                                    }
                                    onClick={() => setSelectedServicer(item)}
                                ></List.Item>
                            );
                        }}
                    />
                </SemiCard>
            </Col>
            <Col span={19}>
                <SemiCard
                    title={
                        <Space size={30} style={{ lineHeight: "32px", fontSize: 15 }}>
                            {selectedServicer.oiName || "-"}

                            <ButtonGroup>
                                {buttonMenus.map((item, index) => (
                                    <Button key={index} theme={currentPath === item.value ? "solid" : "light"} onClick={() => history.replace("/servicer/" + item.value)}>
                                        {item.label}
                                    </Button>
                                ))}
                            </ButtonGroup>
                        </Space>
                    }
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    size="default"
                    bodyStyle={{ padding: 0, height: cardBodyHeight }}
                    headerExtraContent={
                        <Space style={{ fontSize: 14, fontWeight: 500 }}>
                            <Popconfirm
                                title={`确认要改变该服务商的审核状态吗？`}
                                onConfirm={() => {
                                    updateStatus(selectedServicer.oiUuid, !selectedServicer.oasStat, () => {
                                        message.success("成功改变该服务商的审核状态");
                                        loadServicers();
                                    });
                                }}
                            >
                                审核状态：
                                <Button type={selectedServicer.oasStat ? "primary" : "danger"}>{selectedServicer.oasStat ? "正常" : "待审核"}</Button>
                            </Popconfirm>
                            <Popconfirm
                                title={`确认要改变该服务商的客户授权状态吗？`}
                                onConfirm={() => {
                                    updateIsAuth(selectedServicer.oiUuid, !selectedServicer.isAuth, () => {
                                        message.success("成功改变该服务商的客户授权状态");
                                        loadServicers();
                                    });
                                }}
                            >
                                授权状态：
                                <Button type={selectedServicer.isAuth ? "primary" : "danger"}>{selectedServicer.isAuth ? "允许客户授权" : "禁止客户授权"}</Button>
                            </Popconfirm>
                        </Space>
                    }
                >
                    <Outlet context={{ selectedServicer, updateSelectedServicerRoles, cardBodyHeight }} />
                </SemiCard>
            </Col>
        </Row>
    );
};

export default ServicersPage;
